<script lang="ts" setup>
   import { isDark } from '@/utils/is'
   import { useAppStore } from '@/store/modules/app'
   import { useDesign } from '@/hooks/web/useDesign'
   import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
   import routerSearch from '@/components/RouterSearch/index.vue'

   defineOptions({ name: 'APP' })

   const { getPrefixCls } = useDesign()
   const prefixCls = getPrefixCls('app')
   const appStore = useAppStore()
   const currentSize = computed(() => appStore.getCurrentSize)
   const greyMode = computed(() => appStore.getGreyMode)
   const { wsCache } = useCache()

   // 根据浏览器当前主题设置系统主题色
   const setDefaultTheme = () => {
     let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
     if (isDarkTheme === null) {
       isDarkTheme = isDark()
     }
     appStore.setIsDark(isDarkTheme)
   }
   setDefaultTheme()
</script>
<template>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    <routerSearch />
  </ConfigGlobal>
</template>
<style lang="scss">
   $prefix-cls: #{$namespace}-app;

   .size {
     width: 100%;
     height: 100%;
   }

   html,
   body {
     @extend .size;

     padding: 0 !important;
     margin: 0;
     overflow: hidden;

     #app {
       @extend .size;
     }
   }
   //表单内统一设置宽度
   .el-form {
     .el-input,
     .el-input__wrapper,
     .el-textarea {
       width: 220px;
     }
   }
   /**横向表单样式 */
   .el-form--inline {
     .el-form-item {
       margin-right: 10px;
     }
   }
   /**按钮样式 */
   .el-button:hover,
   .el-button:focus {
     color: var(--el-button-text-color);
     background-color:  var(--el-button-bg-color);
     border-color:  var(--el-button-border-color);
   }
   /**返回按钮样式 */
   .routeHeader {
     border-bottom: 1px solid #000;
     padding-bottom: 10px;
     margin-bottom: 10px;
   }
   /**内容组件样式 */
   .el-card {
     padding: 0px;
     .el-card__body {
       padding: 10px;
     }
   }
   /**详情全局样式 */
   .contentView {
     padding: 10px;
     background: #fff;
   }
   .el-table {
     th {
       background: #f5f5f5 !important;
       font-weight: bold !important;
     }
     .el-button.is-link{
      padding:8px 0!important;
      margin-right:10px
     }
   }
   .#{$prefix-cls}-grey-mode {
     filter: grayscale(100%);
   }
</style>
